<template>
  <div class="order-detail-box">
    <div class="top">
      <div class="name">
        <i></i>
        <span>设计师俱乐部</span>
      </div>
      <div class="way">{{activeIndex ?'快递配送' : '到店自提'}}</div>
    </div>
    <panel-item-inner class="panel-inner" :innerGoodsInfo="goodsInfo">
      <span class="integ_num">x1</span>
    </panel-item-inner>
    <div class="bottom">
      <p class="time-wrapper">
        <span class="time">{{new Date().getFullYear()}}-{{new Date().getMonth() + 1}}-{{new Date().getMonth()}}-{{new Date().getDate()}} {{new Date().getHours()}}:{{new Date().getMinutes()}}</span>
        <span class="logistics" @click="checkLogistics" v-if="goodsInfo.delivery_type === 2 && goodsInfo.status === 2 && showBtn">查看物流</span>
      </p>
      <p class="count">
        <span>总计：</span>{{goodsInfo.score}}积分
      </p>
    </div>
  </div>
</template>
<script>
import PanelItemInner from '@/components/panel-item-inner'
export default {
  props: {
    showBtn: {
      type: Boolean,
      default: true
    },
    goodsInfo: {
      type: Object,
      default: () => ({})
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  components: {
    PanelItemInner
  },
  methods: {
    checkLogistics () {
      this.$emit('checkLogistics')
    }
  }
}
</script>
<style lang="scss" scoped>
.order-detail-box {
  width: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
  background: #fff;
  margin-top: 0.42rem;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .name {
      display: flex;
      align-items: center;
      i {
        display: inline-block;
        width: 0.72rem;
        height: 0.23rem;
        background: url("../../../assets/images/icon_logo .png") no-repeat;
        background-size: cover;
        margin-right: 0.2rem;
      }
      span {
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(4, 0, 0, 1);
      }
    }
    .way {
      font-size: 0.24rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0, 4, 0, 1);
    }
  }
  .panel-inner {
    margin-top: 0.4rem;
    .integ_num {
      font-size: 0.24rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(123, 123, 123, 1);
      line-height: 0.32rem;
    }
  }
  .bottom {
    margin-top: 0.4rem;
    .time-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .time {
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(68, 68, 68, 1);
        line-height: 0.32rem;
        text-align: left;
      }
      .logistics {
        padding: 0.11rem 0.26rem;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(0, 4, 0, 1);
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        line-height: 0.24rem;
      }
    }

    .count {
      font-size: 0.24rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0, 4, 0, 1);
      line-height: 0.32rem;
      text-align: right;
      margin-top: 0.56rem;

      span {
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(0, 4, 0, 1);
        line-height: 0.32rem;
        margin-right: 0.2rem;
      }
    }
  }
}
</style>
